<template>
   <!-- 第一个背景 -->
    <div class="screen">
        <!--   第二个是大框架 -->
        <div class="main"> 
            <div class="top"> 
                <Head></Head>
            </div>
            <div class="jiange"></div>
            <div class="bottom">
                <div class="left">
                    <div class="s1">

                    </div>
                    <div class="x1">
                         <leftbottom></leftbottom>
                    </div>
                </div>
                <div class="center">
                    <div class="s2">
                        <centertop></centertop>
                    </div>
                    <div class="x2"><centerbottom></centerbottom></div>
                </div>
                <div class="right">
                    <div class="s3"><righttop></righttop></div>
                    <div class="x3">

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Head from '../components/1/TopMenu.vue'
import leftbottom from '../components/1/EmotionCharts.vue'
import centertop from '../components/1/ChinaMap.vue'
import centerbottom from '@/components/1/CenterBottom.vue'
import righttop from '@/components/1/RightTop.vue'
//import rightbottom from '../components/1/RightBottom.vue'

export default {
    name:'First',
    components:{
       leftbottom,
       Head,
       centertop,
       centerbottom,
       righttop,
    }

}
</script>

<style scoped >
@import './First.css';
</style>